<!DOCTYPE html>
<html>
<head>
  <title>Traversal Rule test document</title>
  <meta charset="utf-8" />
  <style>
    .content:before {
      content: "Content";
    }
  </style>
</head>
<body>
  <header id="header-1">
    <h3 id="heading-1">A small first heading</h3>
    <form>
      <label for="input-1-1">Name:</label>
      <input id="input-1-1">
      <label id="label-1-2">Favourite Ice Cream Flavour:<input id="input-1-2"></label>
      <button id="button-1-1">Magic Button</button>
      <label for="radio-1-1">Radios are old: </label>
      <input id="radio-1-1" type="radio">
      <label for="radio-1-2">Radios are new: </label>
      <input id="radio-1-2" type="radio">
      <label for="input-1-3">Password:</label>
      <input id="input-1-3" type="password">
      <label for="input-1-4">Unlucky number:</label>
      <input id="input-1-4" type="tel">
      <input id="button-1-2" type="button" value="Fun">
      <label for="checkbox-1-1">Check me: </label>
      <input id="checkbox-1-1" type="checkbox">
      <select id="select-1-1">
        <option>Value 1</option>
        <option>Value 2</option>
        <option>Value 3</option>
      </select>
      <select id="select-1-2" multiple="true">
        <option>Value 1</option>
        <option>Value 2</option>
        <option>Value 3</option>
      </select>
      <label for="checkbox-1-2">Check me too: </label>
      <input id="checkbox-1-2" type="checkbox">
      <label for="checkbox-1-3">But not me: </label>
      <input id="checkbox-1-3" type="checkbox" aria-hidden="true">
      <label for="checkbox-1-4">Or me! </label>
      <input id="checkbox-1-4" type="checkbox" style="visibility:hidden">
      <select id="select-1-3" size="3">
        <option>Value 1</option>
        <option>Value 2</option>
        <option>Value 3</option>
      </select>
      <label for="input-1-5">Electronic mailing address:</label>
      <input id="input-1-5" type="email">
      <input id="button-1-3" type="submit" value="Submit">
    </form>
  </header>
  <main id="main-1">
    <h2 id="heading-2">A larger second</h2>
    <div id="heading-3" role="heading">ARIA is fun</div>
    <input id="button-2-1" type="button" value="More Fun">
    <div id="button-2-2" tabindex="0" role="button">ARIA fun</div>
    <div id="button-2-3" tabindex="0" role="button" aria-pressed="false">My little togglebutton</div>
    <div id="button-2-4" tabindex="0" role="spinbutton">ARIA fun</div>
  </main>
  <h1 id="heading-4" style="display:none">Invisible header</h1>
  <dl id="list-1">
    <dt id="listitem-1-1">Programming Language</dt>
    <dd>A esoteric weapon wielded by only the most formidable warriors,
    for its unrelenting strict power is unfathomable.</dd>
  </dl>
  <ul id="list-2" onclick="alert('hi');">
    <li id="listitem-2-1">Lists of Programming Languages</li>
    <li id="listitem-2-2">Lisp
      <ol id="list-3">
        <li id="listitem-3-1">Scheme</li>
        <li id="listitem-3-2">Racket</li>
        <li id="listitem-3-3">Clojure</li>
        <li id="listitem-3-4"><strong>Standard</strong> Lisp</li>
        <li id="listitem-3-5"><a id="link-0" href="#">Common</a> Lisp</li>
        <li id="listitem-3-6"><input id="checkbox-1-5" type="checkbox"> LeLisp</li>
      </ol>
    </li>
    <li id="listitem-2-3">JavaScript</li>
  </ul>
  <section>
    <h6 id="heading-5">The last (visible) one!</h6>
    <img id="image-1" src="http://example.com" alt="">
    <img id="image-2" src="../moz.png" alt="stuff">
    <div id="image-3" tabindex="0" role="img">Not actually an image</div>
  </section>
  <section>
    <h4 id="heading-6" aria-hidden="true">Hidden header</h4>
    <a id="link-1" href="http://www.mozilla.org">Link</a>
    <a id="anchor-1">Words</a>
    <a id="link-2" href="http://www.mozilla.org">Link the second</a>
    <a id="anchor-2">Sentences</a>
    <a id="link-3" href="http://www.example.com">Link the third</a>
  </section>
  <hr id="separator-1">
  <h6 id="heading-6"></h6>
  <table id="table-1">
  <tr>
    <td>3</td>
    <td>1</td>
  </tr>
  <tr>
    <td>4</td>
    <td>1</td>
  </tr>
  </table>
  <section id="grid" role="grid">
    <ol role="row">
      <li role="presentation"></li>
      <li role="columnheader" aria-label="Sunday">S</li>
      <li role="columnheader">M</li>
    </ol>
    <ol role="row">
      <li role="rowheader" aria-label="Week 1">1</li>
      <li role="gridcell"><span>3</span><div></div></li>
      <li role="gridcell"><span>4</span><div>7</div></li>
    </ol>
    <ol role="row">
      <li role="rowheader">2</li>
      <li role="gridcell"><span>5</span><div role="presentation">8</div></li>
      <li id="gridcell4" role="gridcell">
        <span>6</span><div aria-hidden="true"><div class="content"></div></div>
      </li>
    </ol>
  </section>
  <div id="separator-2" role="separator">Just an innocuous separator</div>
  <table id="table-2">
    <thead>
      <tr>
        <th>Dirty Words</th>
        <th>Meaning</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>Mud</td>
        <td>Wet Dirt</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>Dirt</td>
        <td>Messy Stuff</td>
      </tr>
    </tbody>
  </table>
  <footer id="footer-1">
    <div id="statusbar-1" role="status">Last sync:<span>2 days ago</span></div>
    <div aria-label="Last sync: 30min ago" id="statusbar-2" role="status"></div>
  </footer>

  <span id="switch-1" role="switch" aria-checked="false" aria-label="Light switch"></span>
  <p>This is a MathML formula <math id="math-1" display="block">
    <mfrac>
      <mrow><mi>x</mi><mo>+</mo><mn>1</mn></mrow>
      <msqrt><mn>3</mn><mo>/</mo><mn>4</mn></msqrt>
    </mfrac>
  </math> with some text after.</p>
</body>
</html>
